<template>
  <div id="main-show-left">
    <div id="main-left-bar">
      <draggable :list="tool.buttons" :force-fallback="true" animation="300">
        <template #item="ctx">
          <left-tool-button
              :key="ctx.element.id"
              :button="ctx.element"
              :index="ctx.index"
          />
        </template>
      </draggable>
    </div>
  </div>
</template>

<script setup lang="ts">
import LeftToolButton from "./LeftToolButton.vue";
import {useLeftToolStore} from "../../../../store/leftTool";
import {useThemeStore} from "../../../../store/theme";
import {onMounted, onUnmounted} from "vue";
import event from "../../../../plugins/event";
import {UpdateOrgAndRoleEvent} from "../../../../plugins/evenKey";
import {userStore} from "../../../../store/user";

const tool = useLeftToolStore()
const user=userStore()
const theme = useThemeStore()

function init() {

}

onMounted(init)
event.on(UpdateOrgAndRoleEvent,init)
onUnmounted(()=>{
  event.off(UpdateOrgAndRoleEvent,init)
})

</script>

<style scoped>
#main-show-left {
  width: 2%;
  background-color: v-bind('theme.color.Tool.backgroundColor');
  display: flex;
  flex-direction: column;
  border-top-style: none;
  border-right-style: solid;
  border-right-width: 2px;
  border-right-color: v-bind('theme.color.DividingLine');
}
</style>